<template>
  <div ref="refChart" :style="{ height: kHFive + 'px'}"></div>
</template>

<script>
import theme from '../../assets/theme/theme'
import {getComplexJson} from '../../api'

export default {
  name: 'C5',
  data() {
    return {
      chartInstance: null,
      xData: [],
      yData1: [],
      yData2: [],
      // 浏览器高度
      kHFive: null,
      // 浏览器宽度
      kWOne: null,
      // 浏览器字体大小
      kFOne: null,
      // 自适应浏览器获取宽高大小定时器
      screenTimer: null,
      // 局部刷新定时器
      dataTimer: null,
      // 获取浏览器可视区域高度（包含滚动条）、 window.innerHeight
      // 获取浏览器可视区域高度（不包含工具栏高度）、document.documentElement.clientHeight
      // 获取body的实际高度  (三个都是相同，兼容性不同的浏览器而设置的) document.body.clientHeight
      screenHeight: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
      screenWidth: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
    }
  },
  beforeMount() {
    this.kHFive = Math.round(this.screenHeight * 0.475)
  },
  mounted() {
    // 页面大小改变时触发
    window.addEventListener('resize', this.getScreenHeight, false);
    // 页面大小改变时触发
    window.addEventListener('resize', this.getScreenWidth, false);
    // 自适应浏览器获取宽高大小定时器
    this.resizeScreen();
    // 图表初始化
    this.initChart();
    // 获取接口数据
    this.getData();
    // 调用Echarts图表自适应方法
    this.screenAdapter();
    // Echarts图表自适应
    window.addEventListener("resize", this.screenAdapter);
    // 局部刷新定时器
    this.getDataTimer();
  },
  beforeDestroy() {
    // 销毁Echarts图表
    this.chartInstance.dispose();
    this.chartInstance = null;
  },
  destroyed() {
    // 清除自适应屏幕定时器
    clearInterval(this.screenTimer);
    this.screenTimer = null;
    // 清除局部刷新定时器
    clearInterval(this.dataTimer);
    this.dataTimer = null;
    // 页面大小改变时触发销毁
    window.removeEventListener('resize', this.getScreenHeight, false);
    // 页面大小改变时触发销毁
    window.removeEventListener('resize', this.getScreenWidth, false);
    // Echarts图表自适应销毁
    window.removeEventListener("resize", this.screenAdapter);
  },
  methods: {
    // 自适应浏览器获取宽高大小定时器
    resizeScreen() {
      this.screenTimer = setInterval(() => {
        this.getScreenHeight();
        this.getScreenWidth();
      }, 200)
    },
    // 获取浏览器高度进行自适应
    getScreenHeight() {
      this.screenHeight = window.innerHeight || document.documentElement.innerHeight || document.body.clientHeight;
      this.kHFive = Math.round(this.screenHeight * 0.475);
    },
    // 字体大小根据宽度自适应
    getScreenWidth() {
      this.screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
      // 浏览器字体计算
      this.kFOne = Math.round(this.screenWidth / 80);
      // 浏览器宽度宽度
      this.kWOne = this.screenWidth;
    },
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.refChart, theme);
      const initOption = {
        title: {
          text: '查询数量统计',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // Use axis to trigger tooltip
            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },
        legend: {
          // 图例内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。
          top: '10%'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
          data: [
            '中国银行',
            '工商银行',
            '建设银行',
            '交通银行',
            '农业银行'
          ]
        },
        series: [
          {
            name: '企业基本信息查询',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: [100,200,300,400,500]
          },
          {
            name: '企业变更实现查询',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: [110,120,130,140,150]
          },
          {
            name: '自然人关联信息查询',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: [210,220,230,240,250]
          }
        ]
      }
      // 图表初始化配置
      this.chartInstance.setOption(initOption)
    },
    getData() {
      getComplexJson().then(res => {
        // 先进行置空
        this.xData = [];
        this.yData1 = [];
        this.yData2 = [];
        let num1 = res.chartFour.num1;
        let num2 = res.chartFour.num2;
        let num3 = res.chartFour.num3;
        let num4 = res.chartFour.num4;
        let num5 = res.chartFour.num5;
        let num6 = res.chartFour.num6;
        let num7 = res.chartFour.num7;
        let num8 = res.chartFour.num8;
        let num9 = res.chartFour.num9;
        let num10 = res.chartFour.num10;
        let num11 = res.chartFour.num11;
        let num12 = res.chartFour.num12;

        let n1 = res.chartFour.num13;
        let n2 = res.chartFour.num14;
        let n3 = res.chartFour.num15;
        let n4 = res.chartFour.num16;
        let n5 = res.chartFour.num17;
        let n6 = res.chartFour.num18;
        let n7 = res.chartFour.num19;
        let n8 = res.chartFour.num20;
        let n9 = res.chartFour.num21;
        let n10 = res.chartFour.num22;
        let n11 = res.chartFour.num23;
        let n12 = res.chartFour.num24;
        this.xData = [
          "中国银行",
          "农业银行",
          "工商银行",
          "交通银行",
          "建设银行"
        ]
        this.yData2.push(num1, num2, num3, num4, num5);
        this.yData1.push(n1, n2, n3, n4, n5);
        const colorArr = [
          ["#0BA82C", "#4FF778"],
          ["#2E72BF", "#23E5E5"],
          ["#5052EE", "#382a78"],
          ["hotpink", "lightsalmon"],
        ];
        // 处理图表需要的数据
        const dataOption = {
          xAxis: {
            // x轴刻度文字
            data: this.xData
          },
          series: [
            {
              // y轴柱形耗电量数据
              data: this.yData2,
              itemStyle: {
                //颜色样式部分
                normal: {
                  label: {
                    show: true, //开启数字显示
                    position: "top", //在上方显示数字
                    textStyle: {
                      //数值样式
                      color: "lightpink", //字体颜色
                      fontSize: 10, //字体大小
                    }
                  },
                  //   柱状图颜色渐变
                  color: (arg) => {
                    let targetColorArr = null;
                    if (arg.value > 70) {
                      targetColorArr = colorArr[0];
                    } else if (arg.value > 50) {
                      targetColorArr = colorArr[1];
                    } else if (arg.value > 20) {
                      targetColorArr = colorArr[2];
                    } else {
                      targetColorArr = colorArr[3];
                    }
                    return new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: targetColorArr[0],
                      },
                      {
                        offset: 1,
                        color: targetColorArr[1],
                      },
                    ]);
                  }
                }
              }
            },
            {
              // y轴折线耗电量数据
              data: this.yData1
            }
          ]
        }
        // 图表数据变化配置
        this.chartInstance.setOption(dataOption);
      })
    },
    screenAdapter() {
      this.titleFontSize = Math.round(this.$refs.refChart.offsetWidth / 40);
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: this.titleFontSize,
          },
        },
        // 圆点分类标题
        legend: {
          textStyle: {
            fontSize: this.titleFontSize,
          }
        },
        xAxis: {
          //  改变x轴字体颜色和大小
          axisLabel: {
            textStyle: {
              fontSize: Math.round(this.titleFontSize * 0.9),
            }
          },
        },
        yAxis: {
          //  改变y轴字体颜色和大小
          axisLabel: {
            textStyle: {
              fontSize: Math.round(this.titleFontSize * 0.9),
            }
          },
        },
        series: [
          // 双柱的话复制粘贴一份即可
          {
            // 圆柱的宽度
            barWidth: Math.round(this.titleFontSize * 1.2),
            itemStyle: {
              //颜色样式部分
              normal: {
                label: {
                  textStyle: {
                    fontSize: Math.round(this.titleFontSize), //字体大小
                  }
                }
              }
            },
          }
        ],
      };
      // 图表自适应变化配置
      this.chartInstance.setOption(adapterOption)
      // 手动的调用图表对象的resize 才能产生效果
      this.chartInstance.resize()
    },
    // 定时器
    getDataTimer() {
      this.dataTimer = setInterval(() => {
        // 执行刷新数据的方法
        this.getData();
      }, 5000)
    }
  }
}
</script>
